import React, { useState, useEffect, useCallback } from 'react';
import { Modal, Divider, Image } from 'antd';
import styles from './index.less';

interface CommentDetailsProps {
  isDetailVisible: boolean;
  onCancel: () => void;
  commentDetails: any;
}

const CommentDetails: React.FC<CommentDetailsProps> = ({
  isDetailVisible,
  onCancel,
  commentDetails,
}) => {
  const [commentItem, setCommentItem] = useState<any>({});
  const handleCancel = useCallback(() => {
    onCancel();
  }, [onCancel]);

  useEffect(() => {
    if (isDetailVisible) {
      setCommentItem(commentDetails);
    }
  }, [isDetailVisible]);

  return (
    <Modal
      title="订单详情"
      visible={isDetailVisible}
      onCancel={handleCancel}
      footer={null}
    >
      <Divider orientation="left">评价的商品</Divider>
      <div className={styles.goods}>
        <Image
          className={styles.image}
          // src={commentItem.goods.goods_url}
          src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
        />
        <div>
          <p className={styles.title}> title</p>
          {/* <p>{commentItem.goods.title} </p> */}
          <p> 单价: 数量: 总价:</p>
        </div>
      </div>
      <Divider orientation="left">评价的内容</Divider>
      <p>评价的内容</p>
      <Divider orientation="left">回复的内容</Divider>
      <p>回复的内容</p>
    </Modal>
  );
};
export default CommentDetails;
